<template>
  <div class="welcome">
    <p>欢迎您，{{ user.name }}</p>
    <div class="card_view">
      <div class="view_column view_left">
        <MyCard class="wel_card" title="动态">
          <el-skeleton v-if="showLogSkeleton" v-for="item in 4" style="height: 100%;"
                       animated></el-skeleton>
          <my-log-item v-for="(item, index) in userAllLog" :user="item.user" :log="item.log"
                       :log-entity="item.logEntity"></my-log-item>
        </MyCard>
      </div>
      <div class="view_column view_right">
        <MyCard class="class_card" title="我的班级">
          <el-skeleton v-if="showLogSkeleton" v-for="item in 4" style="height: 100%;"
                       animated></el-skeleton>
          <el-button @click="PageStore.setNowClass(item);router().push({name:'myClassInfo'})" v-else
                     v-for="(item, index) in classList" class="class_list_item" text>
            <span>{{ item.name }}</span>
          </el-button>
        </MyCard>
        <MyCard class="class_card" title="我的考试">
          <el-skeleton v-if="showLogSkeleton" v-for="item in 4" style="height: 100%;"
                       animated></el-skeleton>
          <!--todo:待完成欢迎页点击考试跳转-->
          <el-button v-else v-for="(item, index) in examList" class="class_list_item" text>
            <span>{{ item.name }}</span>
          </el-button>
        </MyCard>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import MyLogItem from '../../components/MyLogItem.vue'
import {PageStore, UserStore} from '../../store/store'
import {Class, ClassLog, Exam, ExamLog, MyLog, User} from '../../types/mytypes'
import {ClassLogRequest, ClassRequest, ExamLogRequest, ExamRequest, UserRequest} from '../../request/MyRequset'
import MyList from '../../components/MyList.vue'
import MyCard from "../../components/MyCard.vue";
import router from "../../router/router";

export default defineComponent({
  computed: {
    PageStore() {
      return PageStore
    }
  },
  components: {MyCard, MyList, MyLogItem},
  data() {
    return {
      user: {} as User,
      //testArr: ["测试1", "测试2", "测试3"],
      classList: [] as Array<Class>,
      examList: [] as Array<Exam>,
      userAllLog: [] as Array<MyLog>,
      showLogSkeleton: true,
      showClassSkeleton: true,
      showExamSkeleton: true,
    }
  },
  async mounted() {
    await this.initData();
  },
  methods: {
    router() {
      return router
    },
    async initData() {
      //获取user数据
      this.user = await UserStore.getUser();
      //log(this.user);
      //获取user的全部班级
      if (this.user.id !== undefined) {
        let classres = await ClassRequest.userGetAll(this.user.id);

        this.classList = classres.data;
        //关闭班级骨架
        this.showClassSkeleton = false;
        //获取全部班级的全部考试
        for (let i in this.classList) {
          let c_id: number = this.classList[i].id as number;
          let examres: any = await ExamRequest.getByClassId(c_id);
          let classExamList: Array<Exam> = examres.data.data;
          //获取考试的全部动态
          for (let j in classExamList) {
            let exam: Exam = classExamList[j];
            let e_id: number = exam.id as number;
            let logres: any = await ExamLogRequest.getByExamId(e_id);
            let loglist: Array<ExamLog> = logres.data.data;
            //将exam加入全部考试列表
            this.examList.push(exam);
            //将动态全部加入列表
            for (let k in loglist) {
              let log = loglist[k];
              let userres = await UserRequest.getById(log.u_id);
              let user: User = userres.data;

              //将数据加入全部动态
              let mylog: MyLog = {log: log, user: user, logEntity: exam}
              this.userAllLog.push(mylog);
            }
          }
          //关闭考试骨架
          this.showExamSkeleton = false;
        }

        //log(this.classList)
        //获取与该user有关的全部动态
        for (let i in this.classList) {
          let mclass = this.classList[i];
          let c_id: number = mclass.id as number;
          let classLogRes: any = await ClassLogRequest.getByClassId(c_id);
          //获取与该班级有关的全部动态
          let logList: Array<ClassLog> = classLogRes.data.data;
          //console.log(logList);
          //查找动态对应的user
          for (let j in logList) {
            let mlog: ClassLog = logList[j];
            let userId: number = mlog.u_id;
            let userRes = await UserRequest.getById(userId);
            let user = userRes.data;
            //console.log(mlog);
            //console.log(mlog.date)
            //将数据加入全部动态
            this.userAllLog.push({user: user, log: mlog, logEntity: mclass});
          }
        }

        //对动态进行排序
        this.userAllLog.sort((log1,log2)=>{
          let date1 = new Date(log1.log.date)
          let date2 = new Date(log2.log.date)
          //console.log(date1 > date2)
          if(date1 > date2){
            return -1;
          }
          return 1;
        })
      }
      //关闭动态骨架
      this.showLogSkeleton = false;
    }
  }
})
</script>

<style scoped lang="scss">
.welcome {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  p {
    margin: 10px 0 0 10px;
    color: #444;
  }

  .card_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    //padding: 5px;
    box-sizing: border-box;
    overflow: hidden;

    .view_left {
      width: 75%;
    }

    .view_right {
      width: 25%;
    }

    .view_column {
      display: flex;
      flex-direction: column;
      height: 100%;
      margin: 0 10px 0 0;
      box-sizing: border-box;

      .wel_card {
        background-color: white;
        height: 100%;
        //max-height: 70vh;
        width: 100%;
        margin: 5px;
        box-sizing: border-box;

      }

      .class_card {
        background-color: white;
        height: 50%;
        //max-height: 70vh;
        width: 100%;
        margin: 5px;
        box-sizing: border-box;

        .class_list_item {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: start;
          margin: 0;
        }
      }
    }

  }
}
</style>